<template>
  <div id="app">
    <div class="app-wrap">
      <van-nav-bar
        :title="title"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
        fixed
      >
        <template #right>
          <van-icon name="manager-o" size="18" />
        </template>
      </van-nav-bar>

      <router-view></router-view>

      <van-tabbar v-model="active">
        <van-tabbar-item icon="shopping-cart-o" to="/home"
          >外卖</van-tabbar-item
        >
        <van-tabbar-item icon="search" to="/search">搜索</van-tabbar-item>
        <van-tabbar-item icon="cart-o" :badge="0" to="/order"
          >订单</van-tabbar-item
        >
        <van-tabbar-item icon="friends" to="/mine">我的</van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      active: 0,
      title: this.$route.meta.title || '首页'
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    onClickRight() {
      this.$router.replace('/mine')
    }
  },
  watch: {
    '$route.path'() {
      this.title = this.$route.meta.title
    }
  }
}
</script>
<style lang='scss'>
* {
  margin: 0;
  padding: 0;
}
#app {
  padding-top: 46px;
  padding-bottom: 50px;
  .app-wrap {
    .van-nav-bar {
      background-color: #3190e8;
      i {
        color: white;
      }

      .van-nav-bar__text {
        color: white;
      }
    }
  }
}
</style>
